﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">        
   <style type="text/css">
       .body
       {
           margin: 0px;
           padding: 0px;
           height: 100%;
           width: 100%;
           background-color: #FFFFE0;
       }
       .grid td
       {
           cursor: pointer;
       }
       .grid
       {
           height: 300px;
       }
       .button
       {
           background: transparent url(http://demos.telerik.com/aspnet-ajax/TabStrip/Examples/ApplicationScenarios/Wizard/images/button.gif ) no-repeat scroll left top;
           border: medium none;
           height: 28px;
           width: 90px;
       }
   </style>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           var employeeID, currentEmployee, currentRowIndex = null;
           var employee =
           {
               EmployeeID: null,
               FirstName: null,
               LastName: null,
               Title: null,
               TitleOfCourtesy: null,
               BirthDate: null,
               Notes: null,

               create: function () {
                   var obj = new Object();
                   obj.EmployeeID = "";
                   obj.FirstName = "";
                   obj.LastName = "";
                   obj.Title = "";
                   obj.TitleOfCourtesy = "";
                   obj.BirthDate = "";
                   obj.Notes = "";
                   return obj;
               }
           };

           function getDataItemKeyValue(radGrid, item) {
               return parseInt(radGrid.get_masterTableView().getCellByColumnUniqueName(item, "EmployeeID").innerHTML);
           }

           function pageLoad(sender, args) {
               //employeeID = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0].getDataKeyValue("EmployeeID");
               employeeID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"), $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0]);
               $find("<%= LastName.ClientID %>").focus();
           }

           function rowSelected(sender, args) {
               //employeeID = args.getDataKeyValue("EmployeeID");
               employeeID = getDataItemKeyValue(sender, args.get_gridDataItem());

               currentRowIndex = args.get_gridDataItem().get_element().rowIndex;
               $find("<%= RadTabStrip1.ClientID %>").set_selectedIndex(0);

               MyWebService.GetEmployeeByEmployeeID(employeeID, setValues)
           }

           function setValues(employee) {
               $get("<%= EmployeeID.ClientID %>").innerHTML = employee.EmployeeID;
               $find("<%= LastName.ClientID %>").set_value(employee.LastName);
               $find("<%= FirstName.ClientID %>").set_value(employee.FirstName);
               $find("<%= Title.ClientID %>").set_value(employee.Title);
               $find("<%= TitleOfCourtesy.ClientID %>").findItemByText(employee.TitleOfCourtesy).select();
               $find("<%= BirthDate.ClientID %>").set_selectedDate(employee.BirthDate);
               $find("<%= Notes.ClientID %>").set_html(employee.Notes);
               $find("<%= LastName.ClientID %>").focus();
           }
           function getValues() {
               employee.EmployeeID = $get("<%= EmployeeID.ClientID %>").innerHTML;
               employee.LastName = $find("<%= LastName.ClientID %>").get_value();
               employee.FirstName = $find("<%= FirstName.ClientID %>").get_value();
               employee.Title = $find("<%= Title.ClientID %>").get_value();
               employee.TitleOfCourtesy = $find("<%= TitleOfCourtesy.ClientID %>").get_value();
               employee.BirthDate = $find("<%= BirthDate.ClientID %>").get_selectedDate();
               employee.Notes = $find("<%= Notes.ClientID %>").get_html();
               return employee;
           }
           function updateChanges() {
               MyWebService.UpdateEmployeeByEmployee(getValues(), updateGrid);
           }

           function updateGrid(result) {
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               tableView.set_dataSource(result);
               tableView.dataBind();

               var grid = $find("<%= RadGrid1.ClientID %>");
               grid.repaint();
           }

           function tabSelected(sender, args) {
               if (currentEmployee == null) {
                   currentEmployee = getValues();
               }

               switch (args.get_tab().get_index()) {
                   case 1:
                       {
                           var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();
                           //var newID = parseInt(gridItems[gridItems.length - 1].getDataKeyValue("EmployeeID")) + 1;                                                
                           var newID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"), gridItems[gridItems.length - 1]) + 1;
                           var newEmployee = employee.create();
                           newEmployee.EmployeeID = newID;
                           setValues(newEmployee);

                           $get(" <%= SaveChanges.ClientID %>").value = "Add";
                           $get(" <%= Delete.ClientID %>").style.display = "none";

                           break;
                       }
                   default:
                       {
                           setValues(currentEmployee);
                           currentEmployee = null;
                           $get(" <%= SaveChanges.ClientID %>").value = "Save";
                           $get(" <%= Delete.ClientID %>").style.display = "";
                           break;
                       }
               }
           }

           function deleteCurrent() {
               var table = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element();
               var row = table.rows[currentRowIndex];
               table.deleteRow(currentRowIndex);

               var dataItem = $find(row.id);
               if (dataItem) {
                   dataItem.dispose();
                   Array.remove($find(" <%= RadGrid1.ClientID %>").get_masterTableView()._dataItems, dataItem);
               }

               var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();
               MyWebService.DeleteEmployeeByEmployeeID(employeeID, updateGrid);
               gridItems[gridItems.length - 1].set_selected(true);
           }
                       
       </script>
   </telerik:RadCodeBlock>
   
</head>
<body class="BODY">
   <form runat="server" id="mainForm" method="post" style="width: 100%;">
       <telerik:RadScriptManager ID="ScriptManager1" runat="server">
           <Services>
               <asp:ServiceReference Path="MyWebService.asmx" />                
           </Services>
       </telerik:RadScriptManager>
       <!-- content start -->
       <div style="height: 100%; padding: 10px">
    
       <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
       <telerik:RadGrid ID="RadGrid1" CssClass="grid" DataSourceID="SqlDataSource1" runat="server" Skin="Hay"
           GridLines="None" OnDataBound="RadGrid1_DataBound" OnColumnCreated="RadGrid1_ColumnCreated" Height="300px">
           <MasterTableView TableLayout="Fixed" ClientDataKeyNames="EmployeeID" />                       
           <ClientSettings>
               <Selecting AllowRowSelect="true" />
               <ClientEvents OnRowSelected="rowSelected"/>
               <Scrolling AllowScroll="true" UseStaticHeaders="true" />
           </ClientSettings>
       </telerik:RadGrid>   
       
       <asp:SqlDataSource runat="server" ID="SqlDataSource1"
           ConflictDetection="CompareAllValues"
           ConnectionString="<$ ConnectionStrings>"            
           SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [Notes] FROM [Employees]">            
       </asp:SqlDataSource>
       
       <telerik:RadTabStrip ID="RadTabStrip1" OnClientTabSelected="tabSelected" Style="margin-top: 10px;"
           SelectedIndex="0" runat="server" Skin="Hay">
           <Tabs>
               <telerik:RadTab Text="Edit employee" />
               <telerik:RadTab Text="Add new employee" />
           </Tabs>
       </telerik:RadTabStrip>
       <div style="border: 1px solid threedshadow;">
           <table border="0" style="margin-top: 20px; width: 100%;">
               <tr>
                   <td>
                        Employee ID:
                   </td>
                   <td>
                        <asp:Label ID="EmployeeID" Style="float: left; font-weight: bold;" runat="server" />
                        <asp:Button ID="SaveChanges" CssClass="button" Style="float: right; color: black;
                            font-weight: bold;" OnClientClick="updateChanges(); return false;" Text="Save"
                            runat="server" />
                        <asp:Button ID="Delete" CssClass="button" Style="float: right; margin-right: 10px;
                            color: black; font-weight: bold;" OnClientClick="if(!confirm('Are you sure you want to delete this employee?'))return false; deleteCurrent(); return false;"
                            Text="Delete" runat="server" />
                   </td>
               </tr>
               <tr>
                   <td>
                        Last name:
                   </td>
                   <td>
                        <telerik:RadTextBox ID="LastName" runat="server" Skin="Hay" />
                   </td>
               </tr>
               <tr>
                   <td>
                        First name:
                   </td>
                   <td>
                        <telerik:RadTextBox ID="FirstName" runat="server" Skin="Hay" />
                   </td>
               </tr>
               <tr>
                   <td>
                        Title:
                   </td>
                   <td>
                        <telerik:RadTextBox ID="Title" runat="server" Skin="Hay" />
                   </td>
               </tr>
               <tr>
                   <td>
                        Title of courtesy:
                   </td>
                   <td>
                        <telerik:RadComboBox ID="TitleOfCourtesy" runat="server" Skin="Hay">
                            <Items>
                                <telerik:RadComboBoxItem Text="" Value="" />
                                <telerik:RadComboBoxItem Text="Dr." Value="Dr." />
                                <telerik:RadComboBoxItem Text="Mr." Value="Mr." />
                                <telerik:RadComboBoxItem Text="Mrs." Value="Mrs." />
                                <telerik:RadComboBoxItem Text="Ms." Value="Ms." />
                            </Items>
                        </telerik:RadComboBox>
                   </td>
               </tr>
               <tr>
                   <td>
                        Birth date:
                   </td>
                   <td>
                        <telerik:RadDatePicker ID="BirthDate" MinDate="01/01/1900" runat="server" Skin="Hay" />
                   </td>
               </tr>
               <tr>
                   <td style="vertical-align: top;">
                        Notes:
                   </td>
                   <td style="height: 400px;float:left;">
                        <telerik:RadEditor ID="Notes"  Width="100%" runat="server" Skin="Hay" />
                   </td>
               </tr>
           </table>
       </div>
   </div>
       <!-- content end -->
   </form>
</body>
</html>
